<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>查看子平台VIP设置</el-breadcrumb-item>
        <el-breadcrumb-item>查看权益</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-form ref="rulePowerForm"  :model="rulePowerForm">
        <el-row>
          <el-form-item label="等级名称：" class="labelAlignment mb30" :class="{alignment:this.data.deptType != 1}" label-width="131px"> <span class="font18">{{rulePowerForm.vipName}}</span></el-form-item>
          <el-form-item label="所属平台：" class="labelAlignment mb30" :class="{alignment:this.data.deptType != 1}" label-width="131px"> <span class="font18">{{rulePowerForm.deptName}}</span></el-form-item>
          <el-form-item label="所属商家/店铺：" v-if="this.data.deptType != 1" class="labelAlignment mb30"> <span class="font18">{{this.data.merchantOrStoreName}}</span></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="权益：" class="t_r" :class="{alignment:this.data.deptType != 1}" required label-width="131px">
            <!-- <template>
              <el-transfer 
              v-model="rulePowerForm.ruleIds" 
              :data="data" 
              :titles="['可选权限', '已选权限']"
              >
              </el-transfer>
            </template> -->
            <template>
              <el-table :data="tableData" style="width:460px"  class="rightTable">
                <el-table-column prop="legalRuleName" :label="vipLabel" width="459" size="mini"></el-table-column>
              </el-table>
            </template>
          </el-form-item>
        </el-row>
            <div style="text-align:center">
              <!-- <el-button :size="size" @click="back">{{ $t("action.cancel") }}</el-button> -->
            </div>
      </el-form>
    </div>


  </div>
</template>

<script>
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";
import XLSX from "xlsx";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  created() {
    //单个参数传递的时候
    this.id = this.$route.query.id; //获取上个页面传递的id,在下面获取数据的时候先提交id
    this.type = this.$route.query.type;

    //这边接收上个组件传递过来的arry数组，赋值给data中定义的articleTask
    //this.data = this.$route.query.arry;
  },
  data() {
    return {
      HEIGHT: window.innerHeight,
      type: null,
      vipLabel: "",
      tableData: [],
      data: [],
      startTime: null,
      endTime: null,
      id: null,
      businessId: "",
      deptMsg: localStorage.getItem("user"), //当前登录组织信息
      userId: localStorage.getItem("userId"), //当前登录用户id
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      deptName: null,
      deptOption: [],
      content: null,
      size: "small",
      rulePowerForm: {
        id: "",
        deptId: "",
        deptName: "",
        levelName: "",
        ruleIds: []
      },
      pageResult: {},
      value: 0,
      printPage: false,
      editLoading: false,
      reviewFormRules: {},
      checked: [],
      statusList: []
    };
  },
  methods: {
    queryData() {
      let this_ = this;
      let query = {};
      query.id = this.id;
      query.start = 1;
      query.limit = 10;
      if (this.type != 1) {
        (query.deptType = 1),
          (query.isMom = 1),
          this.utils.request.queryMevipRuleList(query, function(res) {
            if (res.code == "0000") {
              this_.rulePowerForm.vipName = res.data.rows[0].vipName;
              this_.rulePowerForm.deptName = res.data.rows[0].deptName;
              this_.rulePowerForm.deptId = res.data.rows[0].deptId;
              this_.rulePowerForm.id = res.data.rows[0].id;
              this_.data.deptType = res.data.rows[0].deptType;
              this_.query(res.data.rows[0].deptId, res.data.rows[0].id);
            }
          });
      } else {
        (query.deptType = 2),
          (query.isMom = 0),
          this.utils.request.queryMerchantOrStoreVipRuleList(query, function(
            res
          ) {
            if (res.code == "0000") {
              this_.rulePowerForm.vipName = res.data.rows[0].vipName;
              this_.rulePowerForm.deptName = res.data.rows[0].deptName;
              this_.rulePowerForm.deptId = res.data.rows[0].deptId;
              this_.rulePowerForm.id = res.data.rows[0].id;
              this_.data.deptType = res.data.rows[0].deptType;
              this_.data.merchantOrStoreName =
                res.data.rows[0].merchantOrStoreName;
              this_.query(res.data.rows[0].deptId, res.data.rows[0].id);
            }
          });
      }
    },
    //已配置权益
    query(deptId, id) {
      let this_ = this;
      let query = {};
      query.deptId = deptId;
      query.vipId = id;
      query.deleteFlag = 0;
      this_.utils.request.queryVipRuleListOther(query, function(res) {
        if (res.code == "0000") {
          this_.tableData = res.data;
          this_.vipLabel = "已选权益" + "(" + res.data.length + ")";
          //    res.data.forEach(items=>{
          //     this_.rulePowerForm.ruleIds.push(items.legalRuleId);
          //  })
        }
      });
    },
    //返回上一层
    back() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.queryData();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-transfer-panel {
  width: 250px !important;
}
.page-container-detail {
  padding: 40px 40px 60px;
}
/deep/ .el-transfer-panel {
  width: 460px !important;
  height: 318px !important;
}
.mb60 {
  margin-bottom: 60px;
}
.btnAlignment {
  text-align: center;
  /deep/ .el-button {
    width: 102px;
    height: 32px;
    margin-right: 60px;
  }
}
/deep/ .el-form-item__label {
  margin-right: 20px !important;
  font-size: 18px !important;
}
/deep/ .el-transfer__buttons {
  button {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  button:nth-child(1) {
    margin-bottom: 80px;
  }
  .el-transfer__button {
    border-radius: 35px !important;
    width: 35px;
    height: 35px !important;
    text-align: center;
    line-height: 35px !important;
    position: relative;
    span {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
    }
  }
}
.rightTable{
  /deep/ .el-table__body tr{
  height: 50px !important;
}
/deep/ .el-table__header th {
  background-color: #65afff !important;
  .cell {
    color: #fff !important;
    font-size: 18px;
  }
}
/deep/ .el-table__row{
   td  {
    text-align: left;
    padding: 0;
    padding-left: 30px;
    border-bottom: none !important;
  }
}
}

.alignment{
  text-align: left;
  /deep/ .el-form-item__label{
    width: 131px !important;
  }
}
</style>
